<template>
    <div>

        <dialog ref="dialogRef" style="width: 100%; height: 100vh;">
            <div class="flex-box">
                <div class="flex-header">
                    <h3>123</h3>
                    <button class="sea-btn-icon pull-right" @click="close"><i class="fa fa-fw fa-close"></i></button>
                </div>
                <div class="flex-body">
                    <div style="height: 300px" class="bg-light-success"></div>
                </div>
                <div class="flex-footer">
                    <div class="pull-right sea-gap-group">
                        <button class="sea-btn">submit</button>
                        <button class="sea-btn" @click="close">cancel</button>
                    </div>
                </div>
            </div>
        </dialog>
        <!--    <dialog id="nonModalDialog">这是非模态弹窗（无遮罩）</dialog>-->

        <button @click="open">打开模态弹窗</button>
        <!--    <button onclick="nonModalDialog.show()">打开非模态弹窗</button>-->
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const dialogRef = ref()

const open = ()=>{
    dialogRef.value.showModal();
}

const close = ()=>{
    dialogRef.value.close();
}

</script>

<style lang="scss">
@use '../../screen';
</style>